<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校园二手书交易平台</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- Font Awesome -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    
    <!-- 自定义样式 -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
        <div class="container">
            <a class="navbar-brand" href="#" onclick="showPage('home')">
                <i class="fas fa-book me-2"></i>校园二手书
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="#" onclick="showPage('home')">
                            <i class="fas fa-home me-1"></i>首页
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" onclick="showPublishForm()">
                            <i class="fas fa-plus-circle me-1"></i>发布书籍
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" onclick="showPage('orders')">
                            <i class="fas fa-shopping-cart me-1"></i>我的订单
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" onclick="showPage('messages')">
                            <i class="fas fa-envelope me-1"></i>消息中心
                            <span id="unreadCount" class="badge bg-danger ms-1" style="display: none;">0</span>
                        </a>
                    </li>
                </ul>
                <ul class="navbar-nav" id="userNav">
                    <!-- 用户登录状态将通过JavaScript动态更新 -->
                </ul>
            </div>
        </div>
    </nav>

    <!-- 主内容区域 -->
    <main class="container my-4">
        <!-- 首页 -->
        <div id="homePage" class="page-content">
            <!-- 搜索区域 -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-search me-2"></i>搜索书籍</h5>
                </div>
                <div class="card-body">
                    <form id="searchForm">
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label">关键词</label>
                                <input type="text" class="form-control" id="keyword" placeholder="书名、作者、ISBN">
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">学院</label>
                                <select class="form-select" id="college">
                                    <option value="">选择学院</option>
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">成色</label>
                                <select class="form-select" id="condition">
                                    <option value="">选择成色</option>
                                    <option value="new">全新</option>
                                    <option value="like_new">九成新</option>
                                    <option value="good">八成新</option>
                                    <option value="fair">七成新</option>
                                    <option value="poor">六成新及以下</option>
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">最低价格</label>
                                <input type="number" class="form-control" id="minPrice" placeholder="0" min="0">
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">最高价格</label>
                                <input type="number" class="form-control" id="maxPrice" placeholder="999" min="0">
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-md-12">
                                <button type="submit" class="btn btn-primary me-2">
                                    <i class="fas fa-search me-1"></i>搜索
                                </button>
                                <button type="button" class="btn btn-outline-secondary" onclick="resetSearch()">
                                    <i class="fas fa-redo me-1"></i>重置
                                </button>
                                <div class="btn-group ms-2" role="group">
                                    <button type="button" class="btn btn-outline-primary" onclick="sortBooks('publish_time')">
                                        <i class="fas fa-clock me-1"></i>最新发布
                                    </button>
                                    <button type="button" class="btn btn-outline-primary" onclick="sortBooks('price')">
                                        <i class="fas fa-sort-amount-up me-1"></i>价格升序
                                    </button>
                                    <button type="button" class="btn btn-outline-primary" onclick="sortBooks('view_count')">
                                        <i class="fas fa-eye me-1"></i>最多浏览
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- 书籍列表 -->
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0"><i class="fas fa-list me-2"></i>书籍列表</h5>
                    <span id="resultCount" class="text-muted">共找到 0 本书籍</span>
                </div>
                <div class="card-body">
                    <div id="booksList" class="row">
                        <!-- 书籍列表将通过JavaScript动态加载 -->
                    </div>
                </div>
                <div class="card-footer">
                    <nav aria-label="书籍分页">
                        <ul class="pagination justify-content-center mb-0" id="pagination">
                            <!-- 分页将通过JavaScript动态生成 -->
                        </ul>
                    </nav>
                </div>
            </div>
        </div>

        <!-- 发布书籍页面 -->
        <div id="publishPage" class="page-content" style="display: none;">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-plus-circle me-2"></i>发布书籍</h5>
                </div>
                <div class="card-body">
                    <form id="publishForm">
                        <div class="row">
                            <div class="col-md-8">
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label class="form-label">书名 <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" id="bookTitle" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">ISBN</label>
                                        <input type="text" class="form-control" id="bookISBN" placeholder="例如：9787302147510">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">作者</label>
                                        <input type="text" class="form-control" id="bookAuthor">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">出版社</label>
                                        <input type="text" class="form-control" id="bookPublisher">
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">成色 <span class="text-danger">*</span></label>
                                        <select class="form-select" id="bookCondition" required>
                                            <option value="">选择成色</option>
                                            <option value="new">全新</option>
                                            <option value="like_new">九成新</option>
                                            <option value="good">八成新</option>
                                            <option value="fair">七成新</option>
                                            <option value="poor">六成新及以下</option>
                                        </select>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">售价 <span class="text-danger">*</span></label>
                                        <div class="input-group">
                                            <span class="input-group-text">¥</span>
                                            <input type="number" class="form-control" id="bookPrice" min="0" step="0.01" required>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">原价</label>
                                        <div class="input-group">
                                            <span class="input-group-text">¥</span>
                                            <input type="number" class="form-control" id="originalPrice" min="0" step="0.01">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">分类</label>
                                        <select class="form-select" id="bookCategory">
                                            <option value="">选择分类</option>
                                        </select>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">适用学院</label>
                                        <select class="form-select" id="bookCollege">
                                            <option value="">选择学院</option>
                                        </select>
                                    </div>
                                    <div class="col-md-12">
                                        <label class="form-label">相关课程</label>
                                        <input type="text" class="form-control" id="bookCourse" placeholder="例如：数据结构、高等数学">
                                    </div>
                                    <div class="col-md-12">
                                        <label class="form-label">详细描述</label>
                                        <textarea class="form-control" id="bookDescription" rows="4" placeholder="请描述书籍的具体情况，如笔记、破损等"></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">书籍图片 <span class="text-danger">*</span></label>
                                <div id="imageUploadArea" class="border-2 border-dashed rounded p-3 text-center mb-3">
                                    <i class="fas fa-cloud-upload-alt fa-3x text-muted mb-2"></i>
                                    <p class="text-muted mb-2">点击或拖拽上传图片</p>
                                    <p class="small text-muted">支持 JPG、PNG、GIF 格式，最多5张</p>
                                    <input type="file" id="bookImages" accept="image/*" multiple style="display: none;">
                                </div>
                                <div id="imagePreview" class="row g-2">
                                    <!-- 图片预览将在这里显示 -->
                                </div>
                            </div>
                        </div>
                        <div class="row mt-4">
                            <div class="col-md-12">
                                <button type="submit" class="btn btn-primary me-2">
                                    <i class="fas fa-check me-1"></i>发布书籍
                                </button>
                                <button type="reset" class="btn btn-outline-secondary">
                                    <i class="fas fa-redo me-1"></i>重置
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- 订单管理页面 -->
        <div id="ordersPage" class="page-content" style="display: none;">
            <div class="row">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="fas fa-shopping-bag me-2"></i>我购买的</h5>
                        </div>
                        <div class="card-body">
                            <div id="buyerOrdersList">
                                <!-- 购买订单列表将通过JavaScript动态加载 -->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="fas fa-store me-2"></i>我出售的</h5>
                        </div>
                        <div class="card-body">
                            <div id="sellerOrdersList">
                                <!-- 出售订单列表将通过JavaScript动态加载 -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 消息中心页面 -->
        <div id="messagesPage" class="page-content" style="display: none;">
            <div class="row">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="fas fa-inbox me-2"></i>收到的消息</h5>
                        </div>
                        <div class="card-body">
                            <div id="receivedMessagesList">
                                <!-- 收到的消息列表将通过JavaScript动态加载 -->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="fas fa-paper-plane me-2"></i>发送的消息</h5>
                        </div>
                        <div class="card-body">
                            <div id="sentMessagesList">
                                <!-- 发送的消息列表将通过JavaScript动态加载 -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 个人中心页面 -->
        <div id="profilePage" class="page-content" style="display: none;">
            <div class="row">
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-body text-center">
                            <img src="https://via.placeholder.com/150" class="rounded-circle mb-3" alt="用户头像">
                            <h5 id="profileUsername">用户名</h5>
                            <p class="text-muted" id="profileUserType">学生用户</p>
                            <div class="mb-3">
                                <span class="badge bg-primary">信誉分：<span id="profileReputation">100</span></span>
                            </div>
                            <button class="btn btn-outline-primary btn-sm">
                                <i class="fas fa-edit me-1"></i>编辑资料
                            </button>
                        </div>
                    </div>
                </div>
                <div class="col-md-8">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="fas fa-chart-bar me-2"></i>我的统计</h5>
                        </div>
                        <div class="card-body">
                            <div class="row text-center">
                                <div class="col-md-3">
                                    <h4 class="text-primary" id="publishedBooksCount">0</h4>
                                    <p class="text-muted">发布书籍</p>
                                </div>
                                <div class="col-md-3">
                                    <h4 class="text-success" id="soldBooksCount">0</h4>
                                    <p class="text-muted">已售书籍</p>
                                </div>
                                <div class="col-md-3">
                                    <h4 class="text-info" id="boughtBooksCount">0</h4>
                                    <p class="text-muted">购买书籍</p>
                                </div>
                                <div class="col-md-3">
                                    <h4 class="text-warning" id="favoriteBooksCount">0</h4>
                                    <p class="text-muted">收藏书籍</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card mt-3">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="fas fa-user-graduate me-2"></i>学生信息</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <p><strong>学号：</strong><span id="profileStudentNumber">-</span></p>
                                    <p><strong>姓名：</strong><span id="profileRealName">-</span></p>
                                    <p><strong>学院：</strong><span id="profileCollege">-</span></p>
                                </div>
                                <div class="col-md-6">
                                    <p><strong>专业：</strong><span id="profileMajor">-</span></p>
                                    <p><strong>入学年份：</strong><span id="profileEnrollmentYear">-</span></p>
                                    <p><strong>邮箱：</strong><span id="profileEmail">-</span></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 登录模态框 -->
    <div class="modal fade" id="loginModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fas fa-sign-in-alt me-2"></i>用户登录</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="loginForm">
                        <div class="mb-3">
                            <label class="form-label">用户名</label>
                            <input type="text" class="form-control" id="loginUsername" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">密码</label>
                            <input type="password" class="form-control" id="loginPassword" required>
                        </div>
                        <div class="form-check mb-3">
                            <input type="checkbox" class="form-check-input" id="rememberMe">
                            <label class="form-check-label" for="rememberMe">记住我</label>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="performLogin()">
                        <i class="fas fa-sign-in-alt me-1"></i>登录
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 注册模态框 -->
    <div class="modal fade" id="registerModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fas fa-user-plus me-2"></i>用户注册</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="registerForm">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">用户名 <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="regUsername" required>
                                    <small class="form-text text-muted">3-20个字符，只能包含字母、数字和下划线</small>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">密码 <span class="text-danger">*</span></label>
                                    <input type="password" class="form-control" id="regPassword" required>
                                    <small class="form-text text-muted">至少6个字符</small>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">邮箱 <span class="text-danger">*</span></label>
                                    <input type="email" class="form-control" id="regEmail" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">手机号 <span class="text-danger">*</span></label>
                                    <input type="tel" class="form-control" id="regPhone" required>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">学号 <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="regStudentNumber" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">真实姓名 <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="regRealName" required>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">学院 <span class="text-danger">*</span></label>
                                    <select class="form-select" id="regCollege" required>
                                        <option value="">选择学院</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">专业 <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="regMajor" required>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">入学年份 <span class="text-danger">*</span></label>
                                    <select class="form-select" id="regEnrollmentYear" required>
                                        <option value="">选择年份</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="performRegister()">
                        <i class="fas fa-user-plus me-1"></i>注册
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 提示消息容器 -->
    <div id="alertContainer" class="position-fixed top-0 end-0 p-3" style="z-index: 1050;">
        <!-- 提示消息将通过JavaScript动态添加 -->
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>
    
    <!-- jQuery -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    
    <!-- 自定义JavaScript -->
    <script src="js/app.js"></script>
</body>
</html>
